<template>
	<view class="" :style="{width: width + 'rpx',height: height + 'rpx'}">
		<slot></slot>
	
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
			},
			height: {
				type: Number,
			},
			TemplatePics: {
				type: Array,
			},
			idx: {
				type: [Number, String]
			}
			
		},
		data() {
			return {
				showChangPicBtn: -1,
				showChangPic: false,
				mokaTemplate: {},
			}
		},
		created(){
			this.mokaTemplate.mokaTemplate = this.TemplatePics;
		},
		methods: {
			changPicBtn(index) {
				this.showChangPic = !this.showChangPic
				if (this.showChangPic == true) {
					this.showChangPicBtn = index;
				} else {
					this.showChangPicBtn = -1;
				}
				
			},
			onChange(e, idx) {
				// console.log(idx, e)
				// console.log('xy 数据', e.detail)
				
				this.mokaTemplate.TemplatePics[idx]['local'] = e.detail;
				
				// console.log('mokaTemplatexxxxxxxxxxx', this.mokaTemplate);
			},
			imageLoad(e,index) {
				// console.log('image DOM', e)
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const { width, height } = e.detail;
				const initW = this.mokaTemplate.TemplatePics[index]['PicWidth'] * this.mokaTemplate.MokaTempRate;
				const initH = this.mokaTemplate.TemplatePics[index]['PicHeight'] * this.mokaTemplate.MokaTempRate;
				// console.log('initW', initW)
				
				// console.log()
				// 高度 = 原始高度 / 原始宽度 * initW
				this.mokaTemplate.TemplatePics[index]['imgheight'] = (height / width) * initW;
				// console.log('mokaTemplate.TemplatePics', this.mokaTemplate.TemplatePics)
			},
		},
	}
</script>

<style lang="scss">
	.tihuanBtn {
		position: absolute;
		z-index: 500;
		left: 50%;
		margin-left: -20rpx;
		top:50%; 
		margin-top: -20rpx;
		width:40rpx;
		height:40rpx;
		background:#FFDD00;
		border: 3rpx solid rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
		color:#000;
		text-align: center;
		font-size:12rpx;
		line-height:40rpx;
	}
</style>